<template>
  <div id="app">
    <router-view />
    <!-- 底部导航栏 -->
    <!-- <div v-if="$route.name !== '登录'" class="tab-bar"> -->
    <!-- <van-tabbar route class="tab-ber" v-if="$route.name !== '登录'">
      <van-tabbar-item replace to="/" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item replace to="/media" icon="video-o">书影音</van-tabbar-item>
      <van-tabbar-item replace to="/broad" icon="volume-o">广播</van-tabbar-item>
      <van-tabbar-item replace to="/group" icon="comment-o">小组</van-tabbar-item>
      <van-tabbar-item replace to="/mine" icon="friends-o">我的</van-tabbar-item>
    </van-tabbar> -->
    <!-- 选中的样式? -->
    <!-- <van-tabbar-item replace to="/" icon="home-o">
          <template #icon="props">
            <img src="" v-show="props.active">
            <img src="" v-show="!props.active">
            动态绑定属性值 v-bind :src=""
            <img :src="props.active ? icon.active : icon.inactive" /> 
          </template>
    </van-tabbar-item>-->
    <!-- </div> -->
  </div>
</template>

<script>
export default {
  name: 'App',
  mounted() {
    console.log(this.$route.name);
  }
};
</script>

<style scoped>
.tabber {
  background-color: whitesmoke;
}
@media all and (min-width: 500px) {
  #app {
    /* width: 100%; */
    /* height: 76.8rem; */
    position: relative;
  }
  .tab-ber {
    position: sticky;
    bottom: 0;
    background-color: whitesmoke;
  }
  .tabber {
    width: 100%;
    /* 绝对定位最近的为参照物 */
    /* position: absolute; */
    position: static;
    background-color: whitesmoke;
  }
}
</style>
